<%@page import="Logic.Authorizer"%>
<%@page import="servlet.AppttypeDropdown"%>
<%@page import="servlet.StaffappStaffDropdown"%>
<%@page import="servlet.DiplomaDropDown"%>
<%@page import="servlet.YearDropDown"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<%
	if (session.getAttribute("name") == null) {
		response.sendRedirect("login.jsp");
	} else {
		if (Authorizer.checkRole("1", session.getAttribute("role")
				.toString()) || Authorizer.checkRole("3", session.getAttribute("role").toString()) || (session
						.getAttribute("role").equals("2"))) {

		}
		else
		{
			response.sendRedirect("nopermission.jsp");
						
		}
	}
%>

<%int counteralt = 0;
 int counteralt1 = 0; %>
<!-- Declare the first header -->
<jsp:include page="t_header.jsp" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<!-- script for adding and removing staffnames from textarea -->
<script type="text/javascript">

	function addStaff() {
		var substring = "Staff is already appointed to this appointment!";
		var substringpending = "Staff is already appointed to this appointment.";
		var fullstring = document.getElementById("staffdetails").innerHTML;
		if (fullstring.indexOf(substring) != -1) {
            alert("Staff is already appointed to this appointment.\nResult : Approved.");
        }
		else if (fullstring.indexOf(substringpending) != -1) {
			alert ("Staff is already appointed to this appointment,\nResult : Pending.");
        }
	else{
	
		var stafflist = document.getElementById("staffnames");
		
		var e = document.getElementById("selectstaff");
		
		var name = e.options[e.selectedIndex].text;
		
		var id = e.options[e.selectedIndex].value;
		if(isOptionAlreadyExist(stafflist,id)){
			alert('Staff already added');
			return false;
		}
		
		var staff = document.getElementById("staff").value;
		
		var array = staff.split(', ');

		if (staff == "") {
			document.getElementById("staff").value = id;
		} else {
			if (jQuery.inArray(name, array) == -1) {
				staff = staff.concat(', ');
				document.getElementById("staff").value = staff
						.concat(id);
			}
		}

		var optn = document.createElement("option");
		
		optn.text = name;
		
		optn.value = id;
		
		stafflist.add(optn,null);

	}
}
	
	function isOptionAlreadyExist(listBox,value){
		var exists=false;
		
		for(var x=0; x<listBox.options.length; x++){
			
			if(listBox.options[x].value==value || listBox.options[x].text==value){ 
				
				exists=true;
				
				break;
			}
		}
		return exists;
	}

	function removeStaff() {
		//document.getElementById("newApp").style.display="none";
		var stafflist = document.getElementById("staffnames");
		
		var optionToRemove =stafflist.options.selectedIndex;
		
		stafflist.remove(optionToRemove);
		
		var tempStaff = "";
		
		for(var x=0;x<stafflist.options.length;x++){
			if (tempStaff == "") {
				tempStaff = stafflist.options[x].value;
			} else {
				tempStaff = tempStaff.concat(', ');
				tempStaff = tempStaff.concat(stafflist.options[x].value);
			}
		}
	
		document.getElementById("staff").value = tempStaff;
		

		
		return true;
	}
	
	function addAppointment() {

		var e = document.getElementById("appointment");
		var name = e.options[e.selectedIndex].value;
		var staff = document.getElementById("appointmentnames").value;

		var array = staff.split(', ');

		if (staff == "") {
			document.getElementById("appointmentnames").value = name;
		} else {
			if (jQuery.inArray(name, array) == -1) {
				staff = staff.concat(', ');
				document.getElementById("appointmentnames").value = staff
						.concat(name);
			}
		}

	}

	function removeAppointment() {
		var staff = document.getElementById("appointmentnames").value;

		var array = staff.split(',');
		
		if (staff != "") {
			array.pop();
			document.getElementById("appointmentnames").value = array;
		}
	}
	
	
	function classgather (list){
	var apptid = document.getElementById("appointment").value;
	if(apptid == 102){
	var x = document.getElementById("diploma").value;
	var y = document.getElementById("year").value;
	var sel = document.getElementById("class");
	var sv = sel.options[sel.selectedIndex].text;
	if(x == ""){
	}
	else
	{
	var classCom = x+y+sv;
	document.getElementById("nameclass").value = classCom;
	document.getElementById("classcombinedfortable").value = classCom;
	}
	}
	
	}
	
	
	function reload (list) {
		reload1();
		reload1new();
		
		$(".specialtable tr").remove();
		document.getElementById("specialtablerownumber").value = 0;
	
		var x = document.getElementById("appointment").value;
		document.getElementById("appointmentnormal").value = parseInt(x);
		document.getElementById("appointmentnormalnew").value = parseInt(x);
		
	if(x == 101 || x == 102 || x == 103){
		document.getElementById("newApp").style.display="none";
		document.getElementById("newApp2").style.display="block";
		
		if(x==101){
		document.getElementById("class").style.display="none";
		document.getElementById("year").style.display="block";
		//Below method is to let it not enabled.
		//$("#class").attr("disabled", true);
		//$("#year").attr("disabled", false);
		}
		else if(x==102){
		document.getElementById("class").style.display="block";
		document.getElementById("year").style.display="block";
		//$("#class").attr("disabled", false);
		//$("#year").attr("disabled", false);
		}
		else if(x=103){
		document.getElementById("class").style.display="none";
		document.getElementById("year").style.display="none";
		//$("#class").attr("disabled", true);
		//$("#year").attr("disabled", true);
		}
	}
	else{
		document.getElementById("newApp").style.display="block";
		document.getElementById("newApp2").style.display="none";
	}
	
	if(x == "nill")
	{
	document.getElementById("newApp").style.display="none";
	document.getElementById("newApp2").style.display="none";
	}
		
  
	};
	
	
	function reload1 (list) {
		
		var staffid1 = $("#selectstaff").val();
		var appointmentid1 = $("#appointment").val();
		 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
            	 document.getElementById('staffdetails').style.display = 'block';
            	 $("#staffdetails").html(msg);
             }
         });
	  
	};

	function reload1new (list) {
		
		var staffid1 = $("#selectstaffnew").val();
		var appointmentid1 = $("#appointment").val();
		 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
            	 document.getElementById('staffdetailsnew').style.display = 'block';
            	 $("#staffdetailsnew").html(msg);
             }
         });
	  
	};

	$(document).ready(function() {
	
	var staffid1 = $("#selectstaff").val();
		var appointmentid1 = $("#appointment").val();
		 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
            	 document.getElementById('staffdetails').style.display = 'block';
            	 $("#staffdetails").html(msg);
             }
         });
         
         var staffid2 = $("#selectstaffnew").val();
		var appointmentid2 = $("#appointment").val();
		 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid2, appointmentid : appointmentid2},
             type: 'get',
             success: function(msg){
            	 document.getElementById('staffdetailsnew').style.display = 'block';
            	 $("#staffdetailsnew").html(msg);
             }
         });
	  
	
		//confirmation dialog defination
		$("#dialog-confirm").dialog({
			autoOpen : false,
			show: {
				effect:"drop",
				duration: 1000
			},
			hide: {
				effect:"drop",
				duration: 1000
			},
			resizable : false,
			modal : true,
			buttons : {
				"Confirm Appointment" : function() {
					$("#newApp").submit();
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			},
			open : {
				
			},
			close : function(event, ui) {
				//Cleaup routine to reset the data for the next time the form opens
				
			}
		});

		//onclick appointstaff button
		$("#testdialog").click(function() {
			var checkdate = document.getElementById("inputField").value;
			
			if(checkdate != "")
			{
			
			//get all names in listbox
			var list = document.getElementById("staffnames");
			var arr = $.map(list.options, function(o){
				return o.text;
			});
			var test = arr.join(', ');
			
			//get appointment from dropdownlist
			var appt = $("#appointment option:selected").text();
			
			//set content
			document.getElementById("dialogmsg").innerText = "Appoint " + test + " as " + appt + "?";
			
			//display dialog box
			$("#dialog-confirm").dialog("open");
			}
			else
			{
			alert("Please enter effective date.");
			}
		});
	});
	
	$(document).ready(function() {
		//confirmation dialog defination
		$("#dialog-confirmnew").dialog({
			autoOpen : false,
			show: {
				effect:"drop",
				duration: 1000
			},
			hide: {
				effect:"drop",
				duration: 1000
			},
			resizable : false,
			modal : true,
			buttons : {
				"Confirm Appointment" : function() {
					$("#newApp2").submit();
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			},
			open : {
				
			},
			close : function(event, ui) {
				//Cleaup routine to reset the data for the next time the form opens
				
			}
		});

		//onclick appointstaff button
		$("#testdialognew").click(function() {
			var checkdate = document.getElementById("inputField2").value;
			var table = document.getElementById("specialtable");
			var rowCount = table.rows.length;
            
            if(checkdate == "")
			{
			alert("Please enter effective date.");
			}
			else if(rowCount == 0)
			{
			alert("Error. There is no staff added.");
			}
			else if(checkdate != "" && rowCount != 0 )
			{
			//set content
			document.getElementById("dialogmsgnew").innerText = "Confirm to proceed Appointment(s)?";
			
			//display dialog box
			$("#dialog-confirmnew").dialog("open");
			}

			
		});
	});
	
	
	        function deleteRow(specialtable) {
            try {
            var table = document.getElementById("specialtable");
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
            }catch(e) {
                alert(e);
            }
        }
	
	
	function addRow(specialtable){
	var table = document.getElementById("specialtable");
	//Get all required data for insert need
	var staffid = document.getElementById("selectstaffnew").value;
	var diplomaid = document.getElementById("diploma").value;
	var apptid = document.getElementById("appointment").value;
	var staffname = $("#selectstaffnew option:selected").text();
	var appt = $("#appointment option:selected").text();
	var diploma = $("#diploma option:selected").text();
	var year = $("#year option:selected").text();
	var saclass = $("#class option:selected").text();
	classgather();
	var realclass = document.getElementById("classcombinedfortable").value;
	var forexistcc = document.getElementById("diploma").value + $("#year option:selected").text();
	var forexistpm = realclass;
	var forexistcm = document.getElementById("diploma").value;
	
	var checkDIP = document.getElementById("diploma").value;
	if (checkDIP == "")
	{
	alert("Error. Please Select Diploma");
	}
	else
	{
	//For COURSE COORDINATOR
	if(apptid == 101)
	{
	var checkifexist = document.getElementById(forexistcc);
	if(checkifexist != null)
	{
	alert("Error. \nSpecific Diploma & Year has been allocated a Course Coordinator already.");
	}
	
	else
	{
	
		document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
	 	var specialtablerownumber = document.getElementById("specialtablerownumber").value;
		//document.getElementById("tbstaffid").style.display="table-cell";
		var row=table.insertRow(0);
		row.id = forexistcc;
		row.className = "blueprocessheader";
		row.name = "row" + specialtablerownumber;
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		var cell4 = row.insertCell(3);
		var cell5 = row.insertCell(4);
		var cell6 = row.insertCell(5);
		//generate width
		cell1.width = "5%";
		cell2.width = "20%";
		cell3.width = "45%";
		cell4.width = "10%";
		cell5.width = "10%";
		cell6.width = "10%";
		//insert Data
		//Cell 1 -- Checkbox
		var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            
       //Cell 2 -- Staffname & Hidden is staffid     
         var element2 = document.createElement("input");
         	 element2.type = "hidden";
         	 element2.name = "staff" + specialtablerownumber ;
         	 element2.value = staffid;
         	 cell2.innerHTML= staffname ;
			
			//Cell 3 Diploma name & Hidden is combine of dipandyear
			cell3.innerHTML= diploma;
			
			//Cell 4 DiplomaID & Hiddenfield is DiplomaID
			cell4.innerHTML= diplomaid;
			var element4 = document.createElement("input");
         	 element4.type = "hidden";
         	 element4.name = "dipcode" + specialtablerownumber ;
         	 element4.value = diplomaid;
			
			//Cell 5 Year & Hiddenfield is year
			cell5.innerHTML= year;
			var element5 = document.createElement("input");
         	 element5.type = "hidden";
         	 element5.name = "year" + specialtablerownumber ;
         	 element5.value = year;
			
			cell6.innerHTML= "";
			//Cell 6 class & hiddenfield is class
			var element6 = document.createElement("input");
         	 element6.type = "hidden";
         	 element6.name = "saclass" + specialtablerownumber ;
         	 element6.value = "";	
         	 
         	 cell1.appendChild(element1);
         	 cell2.appendChild(element2);
         	 cell4.appendChild(element4);
         	 cell5.appendChild(element5);
         	 cell6.appendChild(element6);
		}
	
	}	
	
	//For Personal Mentor
	else if(apptid == 102)
	{
	var checkifexist = document.getElementById(forexistpm);
	if(checkifexist != null)
	{
	alert("Error. \nClass has been allocated with a Personal Mentor already.");
	}
	else
	{
		document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
	 	var specialtablerownumber = document.getElementById("specialtablerownumber").value;
		//document.getElementById("tbstaffid").style.display="table-cell";
		var row=table.insertRow(0);
		row.id = forexistpm;
		row.className = "blueprocessheader";
		row.name = "row" + specialtablerownumber;
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		var cell4 = row.insertCell(3);
		var cell5 = row.insertCell(4);
		var cell6 = row.insertCell(5);
		//generate width
		cell1.width = "5%";
		cell2.width = "20%";
		cell3.width = "45%";
		cell4.width = "10%";
		cell5.width = "10%";
		cell6.width = "10%";
		//insert Data
		//Cell 1 -- Checkbox
			var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);
       //Cell 2 -- Staffname & Hidden is staffid     
        	 var element2 = document.createElement("input");
         	 element2.type = "hidden";
         	 element2.name = "staff" + specialtablerownumber ;
         	 element2.value = staffid;
         	 cell2.innerHTML= staffname ;
			
		//Cell 3 Diploma name
			 cell3.innerHTML= diploma;
			
		//Cell 4 DiplomaID & Hiddenfield is DiplomaID
			 cell4.innerHTML= diplomaid;
			 var element4 = document.createElement("input");
         	 element4.type = "hidden";
         	 element4.name = "dipcode" + specialtablerownumber ;
         	 element4.value = diplomaid;
			
		//Cell 5 Year & Hiddenfield is year
			 cell5.innerHTML= year;
			 var element5 = document.createElement("input");
         	 element5.type = "hidden";
         	 element5.name = "year" + specialtablerownumber ;
         	 element5.value = year;
         	 
		//Cell 6 class & hiddenfield is class			
			 cell6.innerHTML= realclass;
			 var element6 = document.createElement("input");
         	 element6.type = "hidden";
         	 element6.name = "saclass" + specialtablerownumber ;
         	 element6.value = realclass;	
			
			 cell1.appendChild(element1);
         	 cell2.appendChild(element2);
         	 cell4.appendChild(element4);
         	 cell5.appendChild(element5);
         	 cell6.appendChild(element6);
		}
	
	}
	
	
	//For COURSE Manager
	else if(apptid == 103)
	{
	var checkifexist = document.getElementById(forexistcm);
	if(checkifexist != null)
	{
	alert("Error. \nDiploma has been allocated a Course Manager already.");
	}
	
	else
	{
		document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
	 	var specialtablerownumber = document.getElementById("specialtablerownumber").value;
		//document.getElementById("tbstaffid").style.display="table-cell";
		
		var row=table.insertRow(0);
		row.id = forexistcm;
		row.className = "blueprocessheader";
		row.name = "row" + specialtablerownumber;
		
		
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		var cell4 = row.insertCell(3);
		var cell5 = row.insertCell(4);
		var cell6 = row.insertCell(5);
		//generate width
		cell1.width = "5%";
		cell2.width = "20%";
		cell3.width = "45%";
		cell4.width = "10%";
		cell5.width = "10%";
		cell6.width = "10%";
		//insert Data
		//Cell 1 -- Checkbox
		var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);
       //Cell 2 -- Staffname & Hidden is staffid     
         var element2 = document.createElement("input");
         	 element2.type = "hidden";
         	 element2.name = "staff" + specialtablerownumber ;
         	 element2.value = staffid;
         	 cell2.innerHTML= staffname ;
			
			//Cell 3 Diploma name
			cell3.innerHTML= diploma;
			
			//Cell 4 DiplomaID & Hiddenfield is DiplomaID
			cell4.innerHTML= diplomaid;
			var element4 = document.createElement("input");
         	 element4.type = "hidden";
         	 element4.name = "dipcode" + specialtablerownumber ;
         	 element4.value = diplomaid;
			
			//Cell 5 Year & Hiddenfield is year
			cell5.innerHTML= "";
			var element5 = document.createElement("input");
         	 element5.type = "hidden";
         	 element5.name = "year" + specialtablerownumber ;
         	 element5.value = "";
			
			cell6.innerHTML= "";
			//Cell 6 class & hiddenfield is class
			var element6 = document.createElement("input");
         	 element6.type = "hidden";
         	 element6.name = "saclass" + specialtablerownumber ;
         	 element6.value = "";	
         	 
         	 cell1.appendChild(element1);
         	 cell2.appendChild(element2);
         	 cell4.appendChild(element4);
         	 cell5.appendChild(element5);
         	 cell6.appendChild(element6);
				}
			}		
		}
}
	
</script>



<!-- Declare Breadcrumbs options -->

<jsp:include page="header.html" />
<!-- Declare sidebar -->
<jsp:include page="t_sidebarappointment.jsp" />

<!-- Main Content -->
<section id="main" class="column">
	<%
		if (request.getParameter("error") != null) {
			if (request.getParameter("error").equals("1"))
				out.print("<h4 class='alert_error'>Error - Please fill in all fields.</h4>");
			else if (request.getParameter("error").equals("2"))
				out.print("<h4 class='alert_error'>Error - Please ensure effective date is after today.</h4>");
			else if (request.getParameter("error").equals("-1"))
				out.print("<h4 class='alert_success'>The appointment has been created successfully.</h4>");
			else if (request.getParameter("error").equals("4"))
				out.print("<h4 class='alert_error'>Staff ID : " + request.getParameter("staffid")
					+ " has exceeded the number of appointments allowed to be allocated.</h4>");
			else if (request.getParameter("error").equals("3"))
				out.print("<h4 class='alert_error'>Staff ID : " + request.getParameter("staffid")
					+ " is already appointed to this appointment.</h4>");
		}
	%>

	<%
		if (request.getParameter("prompt") == null) {
	%>
<article class="module width_3_quarter">
				<header>
				<h3>Appoint Staff to Appointment
					<table></table>
				</h3>
			</header>
			<div class="module_content">
				<fieldset>
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>Select Appointment</label>
					<select name="appointment" id="appointment" onchange="reload(this)">
					<option id="nill" value='nill'>
					--- Please Select ---
					</option>
						<%
						
						
						AppttypeDropdown afd = new AppttypeDropdown(out);
								afd.doGet(request, response);
						%>
					</select>
					
				</fieldset>
				</div>

<!-- Normal Form -->
		<form action="StaffAppNew" method="POST" id="newApp" style="display:none">			
			<div class="module_content">

		<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>Staff</label>
				
					<!-- Drop down list to select staff appointment -->
					<select id="selectstaff" class="change" onchange="reload1(this)">
						<%
							StaffappStaffDropdown ssd = new StaffappStaffDropdown(out);
								ssd.doGet(request, response);
						%>
					</select>

					<!-- two buttons for adding and removing staff name from textarea -->
					<div style="margin-left: 4%; margin-top: 2%">
						<button type="button" onclick=addStaff()>Add</button>
						<button type="button" onclick=removeStaff()>Remove</button>
					</div>
				</fieldset>
				
				<fieldset style="width: 48%; float: right; height: 180px">
					<!-- List Box for putting multiple staffs -->
					<select id="staffnames" class="change" onchange="reload(this)" size="4"
						style="height: 170px; margin-bottom: 2% ; margin-right: 3%; margin-left:3%">
					</select>
				</fieldset>
				
				<!-- Side Box for displaying selected staff's appointments -->
				<div class="sidebox" style="float:left;padding-top:0px;">
					<div id="staffdetails"
						style="width: 280px; overflow: auto; height: auto; background-color: #F0F0F5; border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px; padding-left:5px;"></div>
					<input name="staff" type="hidden" id="staff" />
				</div>
				<div class="clear"></div>
				
				 <input type="hidden"
						maxlength="70" name="description">
						
				<input type="hidden" name="appointmentnormal" id="appointmentnormal">
				
				<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>Effective Date</label>
					<br />
					<br />
					<br />
					<br /> <input name="effectivedate"
					
						type="text" id="inputField" style="width:200px; margin-left:10px; 
						margin-top:-30px;  position: absolute;" readonly="readonly" />
				</fieldset>
				<fieldset style="width: 48%; float: left;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>End Date - Optional</label>
					<br />
					<br />
					<br />
					<br /> 
					<input name="enddate" type="text" id="inputField3" style="width:200px; margin-left:10px; 
						margin-top:-30px;  position: absolute;" readonly="readonly">
				</fieldset>
				<div class="clear"></div>			
			</div>
			<footer>
			
				<div id="dialog-confirm" title="Confirmation">
					
						<span class="ui-icon ui-icon-alert"
							style="float: left; margin: 0 7px 20px 0;"></span>
							<div id="dialogmsg">
<!-- 							Appoint Staff(s): A as B? -->
							</div>
							
					
				</div>
				
				<div class="submit_link">
					<input type="button" value="Appoint Staff" class="alt_btn" id="testdialog" >
				</div>
			</footer>
		</form>


	<form action="StaffAppNewSpecific" method="POST" id="newApp2" style="display:none">
	<div class="module_content">
	<TABLE class="tablesorter tableproccess" id="headeronly" width="100%" border="0">
	
        <TR >
        	<Th style="background-color:#97E2E0;" width="5%"></Th>
            <Th style="background-color:#97E2E0;" width="20%">Staff Names</Th>
            <Th style="background-color:#97E2E0;" width="45%">Diploma</Th>
            <Th style="background-color:#97E2E0;" width="10%">Code</Th>
            <Th style="background-color:#97E2E0;" width="10%">Year</Th>
            <Th style="background-color:#97E2E0;" width="10%">Class</Th>
       </TR>
    </TABLE>
	    <TABLE id="specialtable" class="specialtable" width="100%" border="0px">

    </TABLE>
    <input type="hidden" id="specialtablerownumber" name="specialtablerownumber" value="0" />

	
	
	
	
	<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>Staff</label>
					<!-- Drop down list to select staff appointment -->
					<select id="selectstaffnew" name="selectstaffnew" class="change" onchange="reload1new(this)">
						<%
							StaffappStaffDropdown ssds = new StaffappStaffDropdown(out);
								ssds.doGet(request, response);
						%>
					</select>	
					</fieldset>
					
					<fieldset style="width: 48%; float: right;">
					
					<label>Diploma</label>

					<select id="diploma" name="diploma" class="change" size="4" style="height: 125px; margin-bottom: 2% ; margin-right: 3%; margin-left:3%">
						<jsp:scriptlet>
						DiplomaDropDown dip = new DiplomaDropDown(out);
								dip.doGet(request, response);
						</jsp:scriptlet>
					</select>
				</fieldset>
					
					<!-- Side Box for displaying selected staff's appointments -->
				<div class="sidebox" style="float:left;padding-top:0px;">
					<div id="staffdetailsnew"
						style="width: 280px; overflow: auto; height: auto; background-color: #F0F0F5; border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px; padding-left:5px;"></div>
					<input name="staff" type="hidden" id="staff" />
				</div>
				<div class="clear"></div>
				
				 <input type="hidden"
						maxlength="70" name="description">
						
				<input type="hidden" name="appointmentnormalnew" id="appointmentnormalnew">
				<input type="hidden" name="classcombinedfortable" id="classcombinedfortable">
					
					
			<fieldset style="width: 48%; float: left; margin-right: 3%;">
					
					<label>Year</label>

					<select name="year" id="year" >
						<jsp:scriptlet>
						YearDropDown year = new YearDropDown(out);
								year.doGet(request, response);
						</jsp:scriptlet>
					</select>

				</fieldset>
				
			<fieldset style="width: 48%; float: right; ">
					
					<label>Class <input type="hidden" name="nameclass" id="nameclass"></label> 
					
					
					<select  id="class" name="class" class="change" onchange="classgather(this)">
					 <option value="01">01</option>
					 <option value="02">02</option>
					 <option value="03">03</option>
					 <option value="04">04</option>
					 <option value="05">05</option>
					 <option value="06">06</option>
					 <option value="07">07</option>
					 <option value="08">08</option>
					 <option value="09">09</option>
					 <option value="10">10</option>
</select>
		</fieldset>
	
<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>Effective Date</label>
					<br />
					<br />
					<br />
					<br /> <input name="effectivedate"
						type="text" id="inputField2" style="width:200px; margin-left:10px; 
						margin-top:-30px;  position: absolute;" readonly="readonly" />
				</fieldset>
				
				<fieldset style="width: 48%; float: left;">
					<!-- to make two field float next to one another, adjust values accordingly -->
					<label>End Date - Optional</label>
					<br />
					<br />
					<br />
					<br /> <input name="enddate"
						type="text" id="inputField4" style="width:200px; margin-left:10px; 
						margin-top:-30px;  position: absolute;" readonly="readonly" />
				</fieldset>
				<INPUT type="button" value="Remove Staff" onclick="deleteRow('specialtable')" style="float:right; width: 100px" />   
				<INPUT type="button" value="Add Staff" onclick="addRow('specialtable')" style="float:right; margin-right: 1%; width: 100px" />   
				
				<div class="clear"></div>			
			</div>
			<footer>

				<div id="dialog-confirmnew" title="Confirmation">
					
						<span class="ui-icon ui-icon-alert"
							style="float: left; margin: 0 7px 20px 0;"></span>
							<div id="dialogmsgnew">
<!-- 							Appoint Staff(s): A as B? -->
							</div>
							
					
				</div>
				
				<div class="submit_link">
					<input type="button" value="Appoint Staffs" class="alt_btn" id="testdialognew" >
				</div>
			</footer>
		</form>




</article>
	<%
	}
	%>
	
	
</section>


